:root {
  --theme-custom-size: 14;
}

@media (min-width: 1100px) {
  :root {
    --theme-custom-size: 18;
  }
}

:root {
  --theme-custom-columns: 3;
  --theme-custom-preview-shift: 8;
  --theme-custom-preview-gap: 8;
  --theme-custom-preview-circle: 28;
  --theme-custom-edit-height: 10;
}

.theme-custom {
  display: grid;
  grid-template-columns: repeat(var(--theme-custom-columns), 1fr);
  grid-auto-rows: calc((var(--theme-custom-size) / 4) * 1em);
  grid-gap: calc((var(--form-space) / 8) * 1em);
}

.theme-custom-tile {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.theme-custom-tile-front,
.theme-custom-tile-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
}

.theme-custom-tile-front {
  border-radius: calc(var(--theme-radius) * 0.01em);
  z-index: 2;
}

.is-theme-custom-edit .theme-custom-tile-front {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.is-theme-custom-edit .theme-custom-tile-front {
  height: calc(((var(--theme-custom-size) - var(--theme-custom-edit-height)) / 4) * 1em);
  box-shadow: var(--theme-shadow-bottom-medium);
}

.theme-custom-tile-back {
  background-color: hsl(var(--button-background));
  border-radius: calc(var(--theme-radius) * 0.01em);
  overflow: hidden;
  z-index: 1;
}

.theme-custom-button {
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: initial;
  line-height: 1.6;
  display: block;
  overflow: hidden;
  transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), box-shadow var(--layout-transition-extra-fast), border-radius var(--layout-transition-extra-fast);
}

.is-theme-custom-edit .theme-custom-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.theme-custom-control {
  position: absolute;
  left: 0;
  bottom: calc(((var(--theme-custom-edit-height) / 4) * 1em) * -1);
  width: 100%;
  height: calc((var(--theme-custom-edit-height) / 4) * 1em);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: bottom var(--layout-transition-extra-fast);
}

.is-theme-custom-edit .theme-custom-control {
  bottom: 0;
}

.theme-custom-control-button {
  padding: 0;
  border-radius: 0;
  min-height: initial;
  position: relative;
}

.theme-custom-control-button:hover,
.theme-custom-control-button:focus {
  background-color: hsla(var(--theme-accent-text), 0.1);
}

.theme-custom-control-edit .icon,
.theme-custom-control-remove .icon {
  position: relative;
}

.theme-custom-control-edit .icon {
  bottom: calc((var(--theme-radius) / 32) * 0.01em);
  left: calc((var(--theme-radius) / 16) * 0.01em);
}

.theme-custom-control-remove .icon {
  bottom: calc((var(--theme-radius) / 32) * 0.01em);
  right: calc((var(--theme-radius) / 16) * 0.01em);
}

.theme-custom-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.theme-custom-background-01,
.theme-custom-background-02,
.theme-custom-background-03,
.theme-custom-background-04,
.theme-custom-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: clip-path var(--layout-transition-extra-fast);
}

.theme-custom-background-01 {
  background-color: rgb(var(--theme-custom-background-01));
  z-index: 1;
}

.theme-custom-background-02 {
  --theme-custom-preview-shift-02: calc((var(--theme-custom-preview-shift) / 4) + 2);
  background-color: rgb(var(--theme-custom-background-02));
  z-index: 2;
  clip-path: polygon(100% calc(100% - (var(--theme-custom-preview-shift-02) * ((var(--theme-custom-preview-gap) / 4) * 1em))), 100% 100%, calc(100% - (var(--theme-custom-preview-shift-02) * ((var(--theme-custom-preview-gap) / 4) * 1em))) 100%);
  transition-delay: var(--layout-duration-03);
}

.theme-custom-background-03 {
  --theme-custom-preview-shift-03: calc((var(--theme-custom-preview-shift) / 4) + 1);
  background-color: rgb(var(--theme-custom-background-03));
  z-index: 3;
  clip-path: polygon(100% calc(100% - (var(--theme-custom-preview-shift-03) * ((var(--theme-custom-preview-gap) / 4) * 1em))), 100% 100%, calc(100% - (var(--theme-custom-preview-shift-03) * ((var(--theme-custom-preview-gap) / 4) * 1em))) 100%);
  transition-delay: var(--layout-duration-02);
}

.theme-custom-background-04 {
  --theme-custom-preview-shift-04: calc(var(--theme-custom-preview-shift) / 4);
  background-color: rgb(var(--theme-custom-background-04));
  z-index: 4;
  clip-path: polygon(100% calc(100% - (var(--theme-custom-preview-shift-04) * ((var(--theme-custom-preview-gap) / 4) * 1em))), 100% 100%, calc(100% - (var(--theme-custom-preview-shift-04) * ((var(--theme-custom-preview-gap) / 4) * 1em))) 100%);
  transition-delay: var(--layout-duration-01);
}

.theme-custom-accent {
  z-index: 5;
  background-color: rgb(var(--theme-custom-accent));
  clip-path: circle(calc(var(--theme-custom-preview-circle) * 1%) at 100% 100%);
}

.theme-custom-button:focus,
.theme-custom-button:hover {
  --theme-custom-preview-shift: 10;
  --theme-custom-preview-circle: 34;
}

.theme-custom-name {
  padding: calc(0.75em + ((var(--theme-radius) / 8) * 0.01em));
  color: hsl(var(--theme-custom-text));
  font-style: normal;
  font-size: 0.75em;
  text-align: left;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  transform: scale(1);
  transition: color var(--layout-transition-extra-fast), transform var(--layout-transition-extra-fast), max-width var(--layout-transition-extra-fast), max-height var(--layout-transition-extra-fast), top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast);
}
